<template>
  <a-card :bordered="false">
    <h3>商品尺码</h3>
    <ProductSizeFilter
      ref="filter"
      :btnDisabled="!!!selectedRowKeys.length || flag"
      @onToggleSize="onToggleSize"
      @onExport="onExport"
      @onSearch="onSearch"
    ></ProductSizeFilter>
    <s-table ref="table" bordered size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1300 }" :rowSelection="rowSelection">
      <span slot="brandName" slot-scope="text, record">
        {{ record.brandId | brandName }}
      </span>
      <span slot="productImg" slot-scope="text, record">
        <img class="img"  @click="handleShowImg(0, [record.image])" v-if="record.image" :src="record.image" alt="">
        <img class="img"  @click="handleShowImg(0, ['https://picttype1.jnby.com/community/goods/pl-goods.png'])" v-else src="https://picttype1.jnby.com/community/goods/pl-goods.png" alt="">
      </span>
      <span slot="shelf" slot-scope="text, record">
        <span v-if="record.shelf == 1">上架</span>
        <span v-if="record.shelf == 2">下架</span>
      </span>
      <span slot="display" slot-scope="text, record">
        <span v-if="record.display == 1">显示</span>
        <span v-if="record.display == 2">隐藏</span>
      </span>
      <span slot="recommend" slot-scope="text, record">
        <span v-if="record.recommend == 1">开</span>
        <span v-if="record.recommend == 2">关</span>
      </span>
      <span slot="measureImage" slot-scope="text, record">
        <img class="img" @click="handleShowImg(0, [record.measureImage])" v-if="record.measureImage" :src="record.measureImage" alt="">
        <img class="img" v-else src="https://picttype1.jnby.com/community/goods/pl-goods.png" alt="">
      </span>
      <span slot="modelImage" slot-scope="text, record">
        <img class="img" @click="handleShowImg(0, [record.modelImage])" v-if="record.modelImage" :src="record.modelImage" alt="">
        <img class="img" v-else src="https://picttype1.jnby.com/community/goods/pl-goods.png" alt="">
      </span>
      <span class="action" slot="action" slot-scope="text, record">
        <a-tooltip placement="topRight" :overlayStyle="{minWidth: '400px'}" @visibleChange="(visible) => {visibleChange(visible, record.productSizeString)}">
          <template #title>
            <a-table :rowClassName="(record, index) => 'tr'" bordered  :customHeaderRow="customHeaderRow" :customRow="customRow" :pagination="false" :columns="sizeColumns" :data-source="sizeList" :rowKey="(record, index) => index" size="middle" :scroll="{ x: 240 }">
            </a-table>
          </template>
          <a>查看尺码表</a>
        </a-tooltip>
        <a-divider type="vertical" />
        <a @click="handleRefresh(record)">刷新</a>
      </span>
    </s-table>
    <ParagraphPic :current="imgCurrent" :visible.sync="imgVisible" :imgs="imgs"></ParagraphPic>
  </a-card>
</template>
<script>
import { feedbackProductList, feedbackProductUpdate, productSizeExport, feedbackProduct } from '@/api/micromall/sizeRecommendation'
import { STable } from '@/views/box/components'
import ProductSizeFilter from '../components/ProductSizeFilter'
import { columns } from './productSize.js'
import ParagraphPic from '../components/ParagraphPic'
import { brandList } from '../components/brandList.js'
import qs from 'qs'

export default {
  components: {
    ProductSizeFilter,
    STable,
    ParagraphPic
  },
  data() {
    return {
      flag: false,
      imgCurrent: 0,
      imgVisible: false,
      imgs: [],
      sizeList: [
      ],
      sizeColumns: [],
      selectedRowKeys: [],
      selectedRows: [],
      columns,
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
        // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
      },
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const data = {
          ...this.queryParam,
          current: parameter.pageNo,
          size: parameter.pageSize
        }
        return feedbackProductList(data).then(res => {
          if (res.code === 200) {
            const { records, total, size, current } = res.data
            const data = {
              page: {
                count: total,
                pageNo: current,
                pageSize: size,
                pages: Math.ceil(total / size)
              },
              data: records
            }
            return data
          } else {
            this.$message.error(res.msg || res.message)
            const data = {
              page: {
                count: 0,
                pageNo: 0,
                pages: 0
              },
              data: []
            }
            return data
          }
        })
      }
    }
  },
  created() {
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  filters: {
    brandName(v) {
      const name = brandList.filter(e => e.weid == v).length ? brandList.filter(e => e.weid == v)[0].name : ''
      return name
    }
  },
  mounted() {},
  activated() {
  },
  watch: {
  },
  methods: {
    // 刷新
    handleRefresh(item) {
      const {productNO, brandId} = item
      const data = {
        productNo: productNO,
        brandId 
      }
      feedbackProduct(data).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh()
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },
    
    // 尺码推荐、列表开关
    onToggleSize(type, v) {
      const data = {
        display: type == 'display' ? v : null,
        recommend: type == 'recommend' ? v : null,
        strList: this.selectedRowKeys
      }
      this.flag = true
      feedbackProductUpdate(data).then(res => {
        this.flag = false
        if (res.code === 200) {
          this.selectedRowKeys = []
          this.$message.success('修改成功')
          this.$refs.table.refresh()
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
      .catch(err => {
        this.flag = false
      })
    },

    // 查看大图
    handleShowImg(index, productImgList) {
      this.imgCurrent = index
      this.imgVisible = true
      this.imgs = productImgList
    },

    // 查看尺码表
    visibleChange(visible, productSizeString) {
      const list = JSON.parse(productSizeString)
      list.forEach(e => {
        delete e['身高']
        delete e['体重']
      })
      if (visible && list.length) {
        this.sizeColumns = Object.keys(list[0]).map((e, i) => {
          return {
            title: e,
            align: 'center',
            dataIndex: 'myKey'+i,
            className: 'custom-header',
            width: '50px'
          }
        })
         
        const sizeList = list.map(e => {
          return Object.values(e).map((i, index) => {
            return {
              ['myKey'+index]: i
            }
          })
        })
        this.sizeList = sizeList.map(e => {
          return e.reduce((o, i) => Object.assign(o, i),{})
        })
      }
    },
    
    customRow() {
      return {
        style: {
          'font-size': '12px',
          'color': '#fff'
        }
      }
    },

    customHeaderRow() {
      return {
        style: {
          'font-size': '12px'
        }
      }
    },

    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },

    // 导出列表
    onExport() {
      window.location.href =  productSizeExport + `?${qs.stringify(this.queryParam)}`
    },

    //查询
    onSearch(obj) {
      console.log(obj, 'obj')
      this.queryParam = obj
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style lang="less" scoped>
.img {
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    border: 1px dashed #f5f5f5;
    object-fit: scale-down;
    cursor: pointer;
  }
 /deep/.ant-table-thead > tr > th.custom-header{
    color: #fff;
    background: none;
  }
  /deep/ table tbody tr.tr:hover>td{
    background: none !important;
  }
</style>
